import React, { useContext, createContext, useState, useReducer } from 'react';
const ThemeContext = createContext('green');
import TodolistContext from './TodoContext';
import styles from './index.module.less';
export default function LotteryWhiteList() {
  const [color, setcolor] = useState('purple');
  return (
    <div>
      {/*    <Mouse render={mouse => (
          <>
          <Cat mouse={mouse} />
          <Recod mouse={mouse} ></Recod>
          </>
        )}/> */}
      {/*  <ThemeContext.Provider value={color}>
        <Father></Father>
      </ThemeContext.Provider> */}
      <Counter></Counter>
      <div className={styles.box}>盒子</div>
    </div>
  );
}
//todolist+context
//userecuder
// const [state, dispatch] = useReducer(reducer, initialState, init)
//处理 useRuducer的状态逻辑  默认
type actionType = { type: 'increament' } | { type: 'decreate' };
const reducer = (state: number, action: actionType) => {
  switch (action.type) {
    case 'increament':
      return state + 1;
    case 'decreate':
      return state - 1;
    default:
      break;
  }
  return state;
};
function Counter() {
  const [count, setcount] = useState(0);
  const [state, dispatch] = useReducer(reducer, 1);
  return (
    <div>
      {count}
      <button onClick={() => setcount(count + 1)}>+1</button>
      <button onClick={() => setcount(count - 1)}>-1</button>
      <br />
      {state}
      <button onClick={() => dispatch({ type: 'increament' })}>+1</button>
      <button onClick={() => dispatch({ type: 'decreate' })}>-1</button>
    </div>
  );
}

//场景  当前组件逻辑复杂或新状态取决于上一个状态时 ，推荐使用

//render props 只要知道根据props的值来渲染什么类型就是
class Recod extends React.Component {
  render() {
    const mouse = this.props.mouse;
    return (
      <div>
        鼠标位置（x:{mouse.x},y:{mouse.y}）
      </div>
    );
  }
}
class Mouse extends React.Component {
  constructor(props) {
    super(props);
    this.handleMouseMove = this.handleMouseMove.bind(this);
    this.state = { x: 0, y: 0 };
  }

  handleMouseMove(event) {
    this.setState({
      x: event.clientX,
      y: event.clientY,
    });
  }
  render() {
    return (
      <div
        style={{ height: '100vh', overflow: 'hidden' }}
        onMouseMove={this.handleMouseMove}
      >
        {/*
          Instead of providing a static representation of what <Mouse> renders,
          use the `render` prop to dynamically determine what to render.
        */}
        <h3>我数鼠标逻辑</h3>
        {this.props.render(this.state)}
      </div>
    );
  }
}
class Cat extends React.Component {
  render() {
    const mouse = this.props.mouse;
    return (
      <img
        src="https://img0.baidu.com/it/u=2976105222,2386068091&fm=26&fmt=auto&gp=0.jpg"
        style={{ position: 'absolute', left: mouse.x, top: mouse.y }}
      />
    );
  }
}
//useContext
function Father() {
  return (
    <div>
      <Child></Child>
    </div>
  );
}
function Child() {
  return (
    <div>
      <Grandson></Grandson>
    </div>
  );
}
function Grandson() {
  const value = useContext(ThemeContext);
  console.log(value, 'grandson');
  return (
    <div>
      <ThemeContext.Consumer>
        {(value) => <h2>{value}</h2>}
      </ThemeContext.Consumer>
    </div>
  );
}
